/**
 * 基础菜单 部门奖金发放
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">金融中心</el-breadcrumb-item>
      <el-breadcrumb-item> 链单复核</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 体0 -->
    <div class="mydivbox" style="margin-top: 50px; margin-bottom: 20px">
      <template>
        <h3 style="margin-left: 210px">流程进度</h3>
        <el-steps :active="2" align-center>
          <el-step title="链单填写"></el-step>
          <el-step title="信息核对"></el-step>
        </el-steps>
      </template>
    </div>

    <div class="container">
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">链单信息</span>
        </div>
        <div class="bottom">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr>
                <th class="th1">开单人:</th>
                <th class="th2">
                  {{ username }}
                </th>
                <th class="th1">链单流转网络:</th>
                <th class="th2">
                  {{ formInline.network }}
                </th>
              </tr>
              <tr>
                <th class="th1">融资机构：</th>
                <th class="th2">
                  {{ formInline.bank }}
                </th>
                <th class="th1">收单人：</th>
                <th class="th2">
                  {{ username }}
                </th>
              </tr>
              <tr>
                <th class="th1">链单编号:</th>
                <th class="th2">
                  {{ formInline.chain_no }}
                </th>
                <th class="th1">链单金额(元):</th>
                <th class="th2">
                  {{ formInline.surplus }}
                </th>
              </tr>
              <tr>
                <th class="th1">开单日:</th>
                <th class="th2">
                  {{ formInline.create_time }}
                </th>
                <th class="th1">兑付日:</th>
                <th class="th2">
                  {{ formInline.deadline }}
                </th>
              </tr>
              <tr>
                <th class="th1">补贴类型:</th>
                <th class="th2">
                  {{ formInline.subsidy }}
                </th>
                <th class="th1"></th>
                <th class="th2"></th>
              </tr>
            </table>
          </el-form>
        </div>
      </div>
      <div class="head">
        <div class="top">
          <span style="margin-left: 20px">单据凭证</span>
        </div>
        <div class="bottom1">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <table border="1">
              <tr style="height: 180px">
                <th class="th1">合同附件:</th>
                <th class="th2">
                  <div class="flex-div uploaditem" style="height: 80%">
                    <div
                      class="img-div"
                      v-for="item in hetongData"
                      :key="item.id"
                    >
                      <img :src="item.file_url" alt="" />
                    </div>
                  </div>
                </th>
              </tr>
              <tr style="height: 180px">
                <th class="th1">发票附件:</th>
                <th class="th2">
                  <div class="flex-div uploaditem" style="height: 80%">
                    <div
                      class="img-div"
                      v-for="item in fapiaoData"
                      :key="item.id"
                    >
                      <img :src="item.file_url" alt="" />
                    </div>
                  </div>
                </th>
              </tr>
              <tr style="height: 180px">
                <th class="th1">单据凭证:</th>
                <th class="th2">
                  <div class="flex-div uploaditem" style="height: 80%">
                    <div
                      class="img-div"
                      v-for="item in pinzhengData"
                      :key="item.id"
                    >
                      <img :src="item.file_url" alt="" />
                    </div>
                  </div>
                </th>
              </tr>
            </table>
          </el-form>
          <div style="margin-left: 440px; margin-top: 80px">
            <el-button type="danger" @click="back()" style="margin-right: 20px"
              >取消，重填表单</el-button
            >
            <el-button type="success" @click="check()"
              >完成，提交审核</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from "../../api/userMG";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loginuser: "", //登录用户
      loading: false, //是显示加载
      username:"",
      editForm: {
        orderCode: "",
      },
      formInline: {
        id: "",
        network: "",
        network_id: "",
        bank: "",
        fund_name: "",
        fund_id: "",
        username: "",
        create_time: "",
        deadline: "",
        chain_no: "",
        creator: "",
        money: "",
        surplus: "",
        enterprise_id: "",
        subsidy:"",
        page: 1,
        limit: 10,
        // token: localStorage.getItem("logintoken"),
      },
      //请求头
      headers: { "Content-Type": "multipart/form-data" },
      dataSize: "",
      picData: [], //file的相关数据
      hetongData: [],
      fapiaoData: [],
      pinzhengData: [],
      listData: [], //用户数据
      scfpData: [], //用户数据
      tempData: [], //临时存储
      bankName: [],
      fundName: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 创建完毕
   */
  created() {
    this.formInline = JSON.parse(this.$route.query.elderInfo);

    console.log("传递的参数", this.formInline);
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata(parameter) {
      this.formInline.creator = JSON.parse(
        localStorage.getItem("userdata")
      ).enterprise_id;
      this.username = JSON.parse(
        localStorage.getItem("userdata")
      ).name;
      console.log();
      if (this.formInline.subsidy == "1") {
        this.formInline.subsidy = "补贴";
      } else if (this.formInline.subsidy == "2") {
        this.formInline.subsidy = "不补贴";
      }
      this.GetDateTime();
      this.loginuser = JSON.parse(
        localStorage.getItem("userdata")
      ).employee_name;
      this.loading = true;
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // 获取图片
      this.$axios
        .get("/api/file/getPic/" + this.formInline.id)
        .then((res) => {
          console.log("findall", res);
          if (res.data.code == "200") {
            this.picData = res.data.data;
            this.classify();
            // console.log(this.picData);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("用户加载失败，请稍后再试！");
        });
    },
    back() {
      console.log(this.formInline.id);
      this.$axios
        .delete("/api/file/deletePic/" + this.formInline.id)
        .then((res) => {
          // console.log("findall", res);
        })
        .catch((err) => {});
      this.$router.push({
        path: "/chain/chainOpen",
      });
    },
    //审核按钮
    check() {
      console.log("formInline", this.formInline);
      this.$axios.post("/api/chain/insert", this.formInline).then((res) => {
        if (res.data.code == "200") {
          alert("提交成功");
          this.$router.push({
            path: "/chain/query",
          });
        }
      });
    },
    classify() {
      console.log("classify");
      for (let i of this.picData) {
        if (i.file_type == "合同附件") {
          this.hetongData.push(i);
        } else if (i.file_type == "发票附件") {
          this.fapiaoData.push(i);
        } else if (i.file_type == "单据凭证") {
          this.pinzhengData.push(i);
        }
      }
      console.log(this.hetongData);
      console.log(this.fapiaoData);
      console.log(this.pinzhengData);
    },
    GetDateTime() {
      var getDate = new Date();

      let dateYear = getDate.getFullYear(); //获取年

      let dateMonth = getDate.getMonth() + 1; //获取月

      let dateDate = getDate.getDate(); //获取当日

      let dateHours = getDate.getHours(); //获取小时

      let dateMinutes = getDate.getMinutes(); //获取分钟

      let dateSeconds = getDate.getSeconds(); //获取秒

      dateMonth = dateMonth < 10 ? "0" + dateMonth : dateMonth;

      dateDate = dateDate < 10 ? "0" + dateDate : dateDate;

      dateHours = dateHours < 10 ? "0" + dateHours : dateHours;

      dateMinutes = dateMinutes < 10 ? "0" + dateMinutes : dateMinutes;

      dateSeconds = dateSeconds < 10 ? "0" + dateSeconds : dateSeconds;

      this.formInline.create_time =
        dateYear +
        "-" +
        dateMonth +
        "-" +
        dateDate +
        " " +
        dateHours +
        ":" +
        dateMinutes +
        ":" +
        dateSeconds;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.mydivbox {
  margin: 0 auto;
  width: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.mydivboxhead {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin: -20px -20px auto;
}

.container {
  width: 80%;
  border: 1px solid rgb(138, 138, 138);
  margin: 0 auto;
  height: 1250px;
}
.container .head {
  width: 100%;
  height: 420px;
}
.container .head .top {
  width: 100%;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}
.container .head .bottom {
  height: 180px;
  width: 90%;
  margin: 0 auto;
  margin-top: 35px;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
tr {
  height: 60px;
}
.th1 {
  width: 20%;
  padding-right: 10px;
  background-color: #f3f3f3;
  text-align: right;
  font-size: 14px;
}
.th2 {
  width: 30%;
}
.bottom1 {
  width: 90%;
  height: 260px;
  margin: 0 auto;
  margin-top: 35px;
}
.bottom1 .th1 {
  width: 20%;
}
.bottom1 .th2 {
  width: 80%;
}
.bottom1 tr {
  height: 180px;
}
.img-div {
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
  float: left;
  width: 20%;
}
.flex-div {
  height: 80%;
  padding-bottom: 10px;
}
img {
  height: 160px;
}
</style>


